<template>
  <div class="framework-showcase">
    <!-- 头部 -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="logo">
            <div class="logo-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M13 10V3L4 14h7v7l9-11h-7z"
                ></path>
              </svg>
            </div>
            <h1>Nuxt LiveConsult</h1>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="main">
      <div class="container">
        <!-- 欢迎区域 -->
        <section class="hero">
          <div class="hero-badge">
            <span>🚀 现代化全栈框架</span>
          </div>
          <h2 class="hero-title">
            Nuxt LiveConsult
            <span class="gradient-text">智能咨询平台</span>
          </h2>
          <p class="hero-description">
            基于 Nuxt 3 构建的现代化在线咨询平台框架
          </p>
        </section>

        <!-- 核心功能特性 -->
        <section id="features" class="features">
          <div class="section-header">
            <h3>🎯 核心功能</h3>
            <p>为现代化咨询平台量身打造</p>
          </div>

          <div class="features-grid">
            <div class="feature-card">
              <div class="feature-icon router">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  ></path>
                </svg>
              </div>
              <h4>智能路由系统</h4>
              <p>
                支持多端适配的智能路由，自动处理APP、小程序、Web环境的跳转逻辑
              </p>
              <div class="feature-tags">
                <span>多端适配</span>
                <span>自动识别</span>
              </div>
            </div>

            <div class="feature-card">
              <div class="feature-icon bridge">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
                  ></path>
                </svg>
              </div>
              <h4>Bridge 通信</h4>
              <p>与原生APP的无缝通信，支持双向数据传递和功能调用</p>
              <div class="feature-tags">
                <span>原生通信</span>
                <span>双向调用</span>
              </div>
            </div>

            <div class="feature-card">
              <div class="feature-icon mobile">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
                  ></path>
                </svg>
              </div>
              <h4>移动端适配</h4>
              <p>完美的移动端体验，支持触摸手势、响应式设计、PWA功能</p>
              <div class="feature-tags">
                <span>响应式</span>
                <span>PWA</span>
              </div>
            </div>
          </div>
        </section>

        <!-- 快速开始 -->
        <section class="quick-start">
          <div class="quick-start-content">
            <h3>🚀 开始体验</h3>
            <p>框架已准备就绪，现在可以开始体验各种功能</p>
            <div class="quick-actions">
              <button class="btn-primary" @click="startDevelopment">
                开始创建页面
              </button>
            </div>
          </div>
        </section>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <p>&copy; 2024 Nuxt LiveConsult Framework</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
// 页面元数据
useHead({
  title: 'Nuxt LiveConsult 框架',
  meta: [
    {
      name: 'description',
      content: '基于 Nuxt 3 构建的现代化在线咨询平台框架',
    },
  ],
});

// 开发相关方法
const startDevelopment = () => {
  // 可以在这里添加页面创建逻辑
};

const goToSmartRouter = () => {
  const { routerPush } = useCustomRouter();
  routerPush('/smart-router');
};

const goToBridgeDemo = () => {
  const { routerPush } = useCustomRouter();
  routerPush('/bridge-demo');
};
</script>

<style lang="scss" scoped>
.framework-showcase {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;

  .container {
    width: 750px;
    margin: 0 auto;
    padding: 0 30px;
  }

  // 头部样式
  .header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;

    .header-content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 120px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 24px;

      .logo-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;

        svg {
          width: 48px;
          height: 48px;
        }
      }

      h1 {
        font-size: 48px;
        font-weight: 700;
        color: #2d3748;
        margin: 0;
      }
    }
  }

  // 主要内容
  .main {
    padding: 60px 0;
  }

  // 英雄区域
  .hero {
    text-align: center;
    margin-bottom: 80px;

    .hero-badge {
      display: inline-block;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 40px;
      padding: 16px 32px;
      margin-bottom: 40px;
      color: white;
      font-size: 28px;
      font-weight: 500;
    }

    .hero-title {
      font-size: 72px;
      font-weight: 800;
      color: white;
      margin: 0 0 40px 0;
      line-height: 1.2;

      .gradient-text {
        background: linear-gradient(135deg, #ffeaa7, #fab1a0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: block;
        margin-top: 16px;
      }
    }

    .hero-description {
      font-size: 32px;
      color: rgba(255, 255, 255, 0.9);
      margin: 0 auto;
      line-height: 1.6;
    }
  }

  // 功能特性
  .features {
    margin-bottom: 80px;

    .section-header {
      text-align: center;
      margin-bottom: 50px;

      h3 {
        font-size: 48px;
        font-weight: 700;
        color: white;
        margin: 0 0 20px 0;
      }

      p {
        font-size: 28px;
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
      }
    }

    .features-grid {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .feature-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
      }

      .feature-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        color: white;

        &.router {
          background: linear-gradient(135deg, #667eea, #764ba2);
        }
        &.bridge {
          background: linear-gradient(135deg, #fa709a, #fee140);
        }
        &.mobile {
          background: linear-gradient(135deg, #43e97b, #38f9d7);
        }

        svg {
          width: 40px;
          height: 40px;
        }
      }

      h4 {
        font-size: 36px;
        font-weight: 600;
        color: #2d3748;
        margin: 0 0 20px 0;
      }

      p {
        font-size: 28px;
        color: #4a5568;
        line-height: 1.6;
        margin: 0 0 24px 0;
      }

      .feature-tags {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;

        span {
          background: #f7fafc;
          color: #4a5568;
          padding: 12px 24px;
          border-radius: 24px;
          font-size: 24px;
          font-weight: 500;
        }
      }
    }
  }

  // 快速开始
  .quick-start {
    text-align: center;
    margin-bottom: 60px;

    .quick-start-content {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 24px;
      padding: 50px 40px;
      margin: 0 auto;

      h3 {
        font-size: 42px;
        font-weight: 700;
        color: #2d3748;
        margin: 0 0 24px 0;
      }

      p {
        font-size: 28px;
        color: #4a5568;
        margin: 0 0 40px 0;
      }

      .quick-actions {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
      }

      .btn-primary {
        width: 100%;
        max-width: 500px;
        padding: 20px 40px;
        border-radius: 12px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 32px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 36px rgba(102, 126, 234, 0.4);
        }
      }
    }
  }

  // 页脚
  .footer {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-top: 2px solid rgba(255, 255, 255, 0.1);

    .footer-content {
      text-align: center;
      padding: 40px 0;
      color: rgba(255, 255, 255, 0.8);
      font-size: 24px;
    }
  }
}
</style>
